<template>
  <div class="index-box">
    <!--    顶栏-->
    <div class="header flex-space-between">
      <div class="logoBox flex-align-center">
        <img src="@/assets/images/logo.png" alt="logo" class="logo">
      </div>
      <div class="flex">
        <div v-if="walletAdr" class="adrBox flex-center">{{ textSubstr(walletAdr, 4) || '未连接钱包' }}</div>
        <div v-else @click="init" class="adrBox flex-center">{{ textSubstr(walletAdr, 4) || '未连接钱包' }}</div>
        <div class="standing-title">{{ getUserLevel(pledgeInfo.level || 0) }}</div>
      </div>
    </div>
    <!--    banner-->
    <div class="banner">
      <!--      <div class="content">-->
      <!--      </div>-->
    </div>
    <!--    公告-->
    <div class="announcement-box" @click="toAnnouncement">
      <div class="announcement-left">
        <img src="@/assets/images/announcement-icon.png" alt="">
        <span class="left-title">{{ articlevalue.content }}</span>
      </div>
      <svg t="1692770946074" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
           p-id="5263" width="30" height="20">
        <path
            d="M213.333333 512a85.333333 85.333333 0 1 1-85.333333-85.333333 85.333333 85.333333 0 0 1 85.333333 85.333333z m298.666667-85.333333a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m384 0a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z"
            fill="#ffffff" p-id="5264"></path>
      </svg>
    </div>
    <!--    选项菜单-->
    <div class="menu-box">
      <div class="menu-card" @click="toMyTeam">
        <img src="@/assets/images/menu1.png" alt="">
        <span>我的团队</span>
      </div>
      <div class="menu-card" @click="toMyWallet">
        <img src="@/assets/images/menu2.png" alt="">
        <span>我的钱包</span>
      </div>
<!--      <div class="menu-card" @click="toReleaseRecord">-->
<!--        <img src="@/assets/images/menu3.png" alt="">-->
<!--        <span>释放记录</span>-->
<!--      </div>-->
      <div class="menu-card" @click="toPrivate">
        <img src="@/assets/images/menu4.png" alt="">
        <span>节点社区</span>
      </div>

        <div class="menu-card" @click="toLink('https://www.0xhares.io')">
        <img src="@/assets/images/menu6.png" alt="">
        <span>野兔星球</span>
      </div>

        <div class="menu-card" @click="toLink('https://www.aimeta.club')">
        <img src="@/assets/images/menu5.png" alt="">
        <span>AMC俱乐部</span>
      </div>


    </div>
    <!--    GBT质押-->
    <div class="pledge-box">
      <!--      质押标题-->
      <div class="pledge-title">
        <img src="@/assets/images/to-right.png" alt="">
        <span>AVM质押</span>
        <img src="@/assets/images/to-left.png" alt="">
      </div>
      <!--      质押操作区域-->
      <div class="pledge-form">
        <div class="form-title">质押AVM</div>
        <div class="form-content0">
          <input v-model="pledgeNum" type="number" placeholder="请输入质押数量" @input="onInput">
          <span>≈</span>
          <span>{{ ((pledgeNum || 0) * (Number(pledgeInfo.gbt_price) || 0)).toFixed(2) }} USDT</span>
        </div>
        <div class="form-content1">
          <span class="content-left">钱包:</span>
          <span class="">{{ pledgeInfo.gbd || '--' }} AVM</span>
        </div>
        <div class="form-content2">
          <span class="content-left">日产出量:</span>
          <span class="">{{ pledgeInfo.add_day || '--' }}%</span>
        </div>
        <div class="form-content3" @click="toCashCoupon">
          <span>现金券</span>
          <span class="content3-right">-{{ couponInfo.money || '-' }}USDT
          <svg t="1692948258942" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
               p-id="8078" width="20" height="20" v-if="couponInfo.money" @click.stop="closeCoupon"><path
              d="M872.802928 755.99406 872.864326 755.99406 872.864326 755.624646Z" fill="#F7AC15" p-id="8079"
          ></path><path
              d="M927.846568 511.997953c0-229.315756-186.567139-415.839917-415.838893-415.839917-229.329059 0-415.85322 186.524161-415.85322 415.839917 0 229.300406 186.524161 415.84094 415.85322 415.84094C741.278405 927.838893 927.846568 741.29836 927.846568 511.997953M512.007675 868.171955c-196.375529 0-356.172979-159.827125-356.172979-356.174002 0-196.374506 159.797449-356.157629 356.172979-356.157629 196.34483 0 356.144326 159.783123 356.144326 356.157629C868.152001 708.34483 708.352505 868.171955 512.007675 868.171955"
              fill="#F7AC15" p-id="8080"></path><path
              d="M682.378947 642.227993 553.797453 513.264806 682.261267 386.229528c11.661597-11.514241 11.749602-30.332842 0.234337-41.995463-11.514241-11.676947-30.362518-11.765975-42.026162-0.222057L511.888971 471.195665 385.223107 344.130711c-11.602246-11.603269-30.393217-11.661597-42.025139-0.059352-11.603269 11.618619-11.603269 30.407544-0.059352 42.011836l126.518508 126.887922L342.137823 639.104863c-11.662621 11.543917-11.780301 30.305213-0.23536 41.96988 5.830799 5.89015 13.429871 8.833179 21.086248 8.833179 7.53972 0 15.136745-2.8847 20.910239-8.569166l127.695311-126.311801L640.293433 684.195827c5.802146 5.8001 13.428847 8.717546 21.056572 8.717546 7.599072 0 15.165398-2.917446 20.968567-8.659217C693.922864 672.681586 693.950494 653.889591 682.378947 642.227993"
              fill="#F7AC15" p-id="8081"></path></svg>
          </span>
        </div>
        <div class="form-btn" v-if="walletAdr" @click="onSubmitPledge">立即质押</div>
        <div class="form-btn" v-else @click="init">连接钱包</div>
        <div class="form-tip" @click="toPledgeRecord">我的质押记录>></div>
        <div class="popup-box">
          <span>3倍收益</span>
        </div>
      </div>
      <!--      价格信息-->
      <div class="priceinfo-box">
        <div class="priceinfo-left">
          <div class="left-top">
            <span>今日价格</span>
            <span class="bot-title">${{ pledgeInfo.gbt_price || '--' }}</span>
          </div>
          <div class="left-bot">
            <span>AVM质押收益</span>
            <span class="bot-title">{{ pledgeInfo.pledge_returns || '--' }} AVM</span>
          </div>
        </div>
        <div class="priceinfo-right">
          <div class="right-top">
            <span class="title-top">总质押数量: {{ pledgeInfo.zhiya_count || '--' }}AVM</span>
            <span>团队人数: {{ pledgeInfo.tan_count || '--' }}人</span>
          </div>
          <div class="right-bot">
            <span class="title-top">会员等级: {{ getUserLevel(pledgeInfo.level || 0) }}</span>
            <span>动态收益: {{ pledgeInfo.dynamic_returns || '--' }}AVM</span>
          </div>
        </div>
      </div>
      <!--      折线图-->
      <div class="line-chart">
        <div class="chart-userinfo">
          <div class="avatar-box"></div>
          <div class="user-info">${{ pledgeInfo.gbt_price || 0 }}</div>
        </div>
        <div class="GBT-title">AVM</div>
        <div id="chart" class="chart-box"></div>
      </div>
    </div>
    <!--    gameFusion-->
    <div class="game-fusion">
      <div class="game-head">
        <img class="to-right" src="../assets/images/to-right.png" alt="">
        <span class="head-title">AVM</span>
        <img class="to-left" src="../assets/images/to-left.png" alt="">
      </div>
      <div class="content-box">
        <div class="content1">
          AVM基于 Apple 公链的消费金融支付积分打通银联、万事达和Visa的国际支付系统
        </div>
        <div class="content2">
          <img src="../assets/images/game1.png" alt="">
        </div>
        <div class="content4">
          AVM (Automated Value Management) 是一项基于 Apple 公链的创新项目，致力于实现消费金融支付、积分打通以及国际支付系统的整合，旨在提供安全可靠的金融服务。同时，AVM
          与Moonbank加密银行合作，覆盖了全球170多个国家，为用户提供便捷的金融解决方案。
        </div>
        <div class="content5">
          <img src="../assets/images/game2.png" alt="">
        </div>
        <div class="content7">
          AVM是未来金融领域的一股重要力量，将在多个方面发挥作用。首先，AVM致力于将消费金融支付系统与全球知名支付网络银联、万事达和Visa打通，实现国际支付的便捷与可靠。无论用户身处世界的哪个角落，他们都能通过AVM在全球各地轻松进行支付和转账，享受高效的金融服务。
        </div>
        <div class="content8">
          <img src="../assets/images/game3.png" alt="">
        </div>
        <div class="content10">
          AVM将借助Apple公链的强大特性，实现安全、透明和快速的交易。Apple公链采用了先进的区块链技术和智能合约，确保交易的真实性和不可篡改性。用户可以放心地使用AVM进行支付和积分管理，而无需担心个人信息的泄露或欺诈行为的发生。
        </div>
        <div class="content12">
          AVM和Moonbank加密银行的合作使其覆盖了全球170多个国家，为用户提供了更广泛的金融服务范围。不论用户身在何处，他们都能在AVM生态系统中安全地管理资金、进行投资和获得贷款等金融活动。这种全球性的金融整合将大幅简化跨境交易，促进国际贸易的繁荣发展。
        </div>
        <div class="content12">
          AVM作为基于 Apple
          公链的消费金融支付积分系统，具有广阔的发展前景。通过打通银联、万事达和Visa等国际支付网络，AVM将为用户提供全球范围内的安全、快速和便捷的支付解决方案。同时与Moonbank加密银行的合作，将为全球用户提供更完善的金融服务体系。AVM的出现将在未来金融领域发挥重要作用，为数字金融时代的发展注入更多创新和活力！
        </div>
      </div>
    </div>
    <!--    绑定上级弹窗-->
    <van-popup v-model:show="isBindParentShow" :close-on-click-overlay="false">
      <div class="notReachedAccount-box">
        <div class="notReachedAccount-title">绑定上级</div>
        <div class="notReachedAccount-title1">上级钱包地址:</div>
        <input v-model="bindParentValue" type="text" placeholder="输入上级钱包地址">
        <div class="notReachedAccount-title3">
          <span class="inner-left">提示:</span>
          <span class="inner-right">上级钱包地址绑定之后,不可更改!</span>
        </div>
        <div class="notReachedAccount-btn" @click="checkBindParent">立即绑定</div>
      </div>
    </van-popup>
  </div>
</template>
<script setup>
import {textSubstr, sliceDecimal, formatNum, getSearchParams} from '@/libs/utlis.js';
import {computed, onMounted, ref} from 'vue';
import {useEthersStore} from '@/stores/ethers';
import * as echarts from 'echarts';
import {useRouter, useRoute} from 'vue-router';
import req from '@/libs/req';
import {debounce} from '@/libs/utlis';
import {closeToast, showSuccessToast, showToast} from 'vant';

const router = useRouter();
const route = useRoute();
const ethers = useEthersStore();
const walletAdr = computed(() => ethers.walletAdr);
const info = computed(() => ethers.info);
const bindParentValue = ref(''); // 上级绑定的钱包地址
const isBindParentShow = ref(false);
const pledgeInfo = ref({}); // 质押信息
const pledgeNum = ref(null); // 质押数量
const articlevalue = ref({}); // 公告信息
const gbtlogLists = ref([]); // 走势列表
const couponInfo = ref({}); // 现金券信息

// 点击不使用现金券
const closeCoupon = () => {
  couponInfo.value = {};
  if (window.localStorage.getItem('couponValue')) {
    window.localStorage.removeItem('couponValue');
  }
};
// 点击进行质押
const onSubmitPledge = async () => {
  if (!pledgeNum.value) return showToast('请输入数量后重试!');
  const res = await req.post('Pledge/pledge', {
    money: pledgeNum.value,
    coupon_id: couponInfo.value.id || '',
  });
  if (res.length === 0) {
    pledgeNum.value = null;
    await getPledgeInfo();
    showSuccessToast('质押成功!');
    window.localStorage.removeItem('couponValue');
  }
};
// 质押数量输入事件
const onInput = (e) => {
  debounceFunc(e.target.value);
};
// 获取可用现金券
const getCoupon = async (money) => {
  const res = await req.post('Pledge/getCoupon', {money});
  if (res.length > 0) {
    if (JSON.stringify(couponInfo.value) === '{}') {
      couponInfo.value = res[0];
    }
  }
};
// 防抖输入
const debounceFunc = debounce(getCoupon, 1000);
// 获取质押走势
const getGbtlog = async () => {
  const res = await req.post('Pledge/getGbtlog');
  gbtlogLists.value = res;
};
// 获取质押公告
const getArticle = async () => {
  const res = await req.post('Pledge/article');
  articlevalue.value = res[0];
};
// 获取质押首页信息
const getPledgeInfo = async () => {
  const res = await req.post('Pledge/getUser');
  pledgeInfo.value = res;
};
// 点击跳转质押记录
const toPledgeRecord = () => {
  router.push('/pledge_record');
};
// 点击跳转我的现金券
const toCashCoupon = () => {
  router.push('/cash_coupon');
};
// 点击跳转节点私募
const toPrivate = () => {
  router.push('/home');
};
// 点击跳转释放记录
const toReleaseRecord = () => {
  router.push('/release_record');
};
// 点击跳转我的钱包
const toMyWallet = () => {
  router.push('/my_wallet');
};
// 点击跳转公告
const toAnnouncement = () => {
  router.push('/announcement');
};
// 点击跳转我的团队
const toMyTeam = () => {
  router.push('/my_team');
};
// 印射用户等级
const getUserLevel = (level) => {
  let txt;
  switch (level) {
    case 0:
      txt = '普通用户';
      break;
    default:
      txt = `V${level}`;
      break;
  }
  return txt;
};

//连接钱包
async function init() {
  try {
    showToast({
      type: 'loading', message: ' ', overlay: true, forbidClick: true, duration: 0,
    });
    bindParentValue.value = getSearchParams('address');

    const isRegister = await ethers.isUserRegister();
    if (!!isRegister) {
      await ethers.init(bindParentValue.value);
      await getPledgeInfo();
    } else {
      isBindParentShow.value = true;
    }
  } catch (e) {
    console.log(e);
  } finally {
    closeToast();
  }
}

// 绑定上级之后登录
const checkBindParent = async () => {
  if (bindParentValue.value.trim() === '') return showToast('钱包地址不能为空,请重新输入!');
  isBindParentShow.value = false;
  await ethers.init(bindParentValue.value);
};

// 图表
async function getChart(){
  await getGbtlog();

  const myChart = echarts.init(document.getElementById('chart'), 'dark');

  myChart.setOption({
    backgroundColor: '#10221D',
    xAxis: {
      type: 'category',
      data: gbtlogLists.value.map(item => item.add_time),
      axisTick: {
        show: true,
        alignWithLabel: true,
        interval: 0,
      },
      axisLabel: {
        interval: 0,
        rotate: 45,
      },
    },
    yAxis: [{
      type: 'value',
    }],
    series: [
      {
        data: gbtlogLists.value.map(item => item.gbt_price),
        type: 'line',
        emphasis: {
          focus: 'series',
        },
        label: {
          show: true,
          position: 'top',
        },
      },
    ],

    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985',
        },
      },
    },
  });
}

function toLink(url){
  window.open(url)
}

onMounted(() => {
  const storageItem = window.localStorage.getItem('couponValue');
  if (!!storageItem) {
    couponInfo.value = JSON.parse(storageItem);
  }

  getArticle();
  getChart()

  if(walletAdr.value){
    getPledgeInfo();
  }
});
</script>
<style scoped lang="scss">
.index-box {
  .header {
    padding: 12px 15px;
    background-color: #000;

    .logoBox {
      font-size: 18px;
      font-weight: 500;
      color: #000;

      .logo {
        width: 43px;
        height: 27px;
        margin-right: 4px;
      }
    }

    .adrBox {
      padding: 6px 12px;
      font-size: 11px;
      font-weight: 400;
      color: #000;
      background: linear-gradient(0deg, #EBFC8C 0%, #ACEAA7 100%);
      border-radius: 30px;
    }

    .standing-title {
      padding: 5px 14px;
      font-size: 11px;
      color: #000;
      background: linear-gradient(0deg, #EBFC8C 0%, #ACEAA7 100%);
      border-radius: 30px;
      margin-left: 10px;
    }
  }

  .banner {
    //min-width: 346px;
    min-height: 223px;
    background: url("@/assets/images/banner.png") no-repeat;
    background-size: 100% 100%;
    //background-position: center -50px;

    .content {
      width: 50%;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
      padding: 31px 11px 21px;
      line-height: 1.5;
    }
  }

  .announcement-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;

    .announcement-left {
      width: 90%;
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #fff;

      .left-title {
        white-space: nowrap; /* 防止文本换行 */
        overflow: hidden; /* 隐藏溢出部分的文本 */
        text-overflow: ellipsis; /* 显示省略号 */
      }

      img {
        width: 19px;
        height: 16px;
        margin-right: 8px;
      }
    }
  }

  .menu-box {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 24px;

    .menu-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 14px;
      color: #12C8A0;

      img {
        width: 45px;
        height: 45px;
        margin-bottom: 5px;
      }
    }
  }

  .pledge-box {
    margin-top: 38px;

    .pledge-title {
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: auto;
        height: 14px;
      }

      span {
        font-size: 23px;
        font-weight: 500;
        background: linear-gradient(180deg, #FAE4C7 0%, #F7AC15 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin: 0 13px;
      }
    }

    .pledge-form {
      position: relative;
      background: #10221D;
      border: 1px dashed #13F6C4;
      margin: 33px 15px 0;
      padding: 24px 12px 25px;

      .form-title {
        font-size: 16px;
        color: #FBF5F5;
      }

      .form-content0 {
        display: flex;
        align-items: center;
        justify-content: space-around;
        background-color: #000;
        border-radius: 5px;
        font-size: 18px;
        color: #999;
        margin: 15px 0;

        input {
          width: 50%;
          font-size: 14px;
          color: #fff;
          padding: 10px 8px;
          border: none;
          margin: 13px 0 9px;
          background-color: #000;
        }
      }


      .form-content1,
      .form-content2 {
        font-size: 14px;
        color: #F7AC15;
        margin-bottom: 11px;
        margin-left: 10px;

        .content-left {
          margin-right: 8px;
        }
      }

      .form-content3 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        color: #F7AC15;
        margin-left: 10px;

        .content3-right {
          display: flex;
          align-items: center;

          svg {
            margin-left: 4px;
          }
        }
      }

      .form-btn {
        font-size: 17px;
        color: #000;
        padding: 14px 0;
        text-align: center;
        background: linear-gradient(-90deg, #EDFC8A 0%, #ABE9A8 100%);
        border-radius: 30px;
        margin: 16px 0 13px;
      }

      .form-tip {
        font-size: 12px;
        color: #F7AC15;
        text-align: center;
        margin-top: 22px;
      }

      .popup-box {
        position: absolute;
        top: -10px;
        right: -3px;
        width: 78px;
        height: 55px;
        font-size: 17px;
        font-weight: 500;
        color: #010101;
        background: url("@/assets/images/popup-bg.png") no-repeat;
        background-size: 100% 100%;
        display: flex;
        justify-content: center;

        span {
          margin-top: 4px;
        }
      }
    }

    .priceinfo-box {
      display: flex;
      justify-content: space-between;
      padding: 0 15px;
      margin-top: 20px;

      .priceinfo-left {
        flex: 1;
        font-size: 13px;
        color: #FBF5F5;

        .left-top,
        .left-bot {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          padding: 15px 0 15px 12px;
          background: url("@/assets/images/price-bg1.png") no-repeat;
          background-size: 100% 100%;
          border: 1px dashed #13F6C4;
        }

        .left-bot {
          margin-top: 9px;
        }

        .bot-title {
          font-size: 17px;
          color: #F7AC15;
          margin-top: 6px;
        }
      }

      .priceinfo-right {
        flex: 1;
        background: url("@/assets/images/price-bg2.png") no-repeat;
        background-size: 100% 100%;
        font-size: 13px;
        color: #FBF5F5;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 14px 10px 21px;
        margin-left: 11px;
        border: 1px dashed #13F6C4;

        .right-top,
        .right-bot {
          display: flex;
          flex-direction: column;
        }

        .title-top {
          margin-bottom: 6px;
        }
      }
    }

    .line-chart {
      background: #10221D;
      border: 1px dashed #13F6C4;
      margin: 19px 15px 30px;
      padding: 13px 19px 0;

      .chart-userinfo {
        display: flex;
        align-items: center;
        margin-bottom: 20px;

        .avatar-box {
          width: 30px;
          height: 30px;
          border-radius: 50%;
          border: 1px solid #13F6C4;
          margin-right: 12px;
        }

        .user-info {
          font-size: 13px;
          color: #FBF5F5;
        }
      }

      .GBT-title {
        font-size: 13px;
        color: #FBF5F5;
      }

      .chart-box {
        width: 100%;
        height: 280px;
      }
    }
  }

  .game-fusion {
    margin-top: 38px;

    .game-head {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 21px;

      .to-right,
      .to-left {
        height: 13px;
        width: auto;
      }

      .head-title {
        font-size: 23px;
        background: linear-gradient(180deg, #FAE4C7 0%, #F7AC15 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin: 0 8px;
      }
    }

    .content-box {
      background: #10221D;
      border: 1px solid #13F6C4;
      font-size: 13px;
      color: #FBF5F5;
      padding: 25px 12px 19px;
      margin: 0 15px;

      img {
        width: 100%;
        height: 100%;
        margin: 17px 0 18px 0;
      }

      .content1,
      .content4,
      .content7,
      .content10,
      .content12 {
        line-height: 24px;
      }

      .content3,
      .content6,
      .content9,
      .content11 {
        font-size: 14px;
        color: #F7AC15;
        margin-bottom: 13px;
      }

      .content11 {
        margin-top: 15px;
      }
    }
  }

  .notReachedAccount-box {
    width: 90vw;
    position: relative;
    padding: 28px 23px 33px;
    font-size: 15px;
    color: #f6f6f6;

    svg {
      position: absolute;
      top: 12px;
      right: 15px;
    }

    .notReachedAccount-title {
      font-size: 18px;
      text-align: center;
      margin-bottom: 47px;
    }

    input {
      width: 100%;
      padding: 13px 12px;
      border: none;
      font-size: 12px;
      color: #ababab;
      background: #454545;
      border-radius: 5px;
      margin: 13px 0 19px;
    }

    .notReachedAccount-title3 {
      display: flex;
      font-size: 12px;
      color: #F7AC15;
      margin: 24px 0 30px;

      .inner-left {
        margin-right: 10px;
      }

      .inner-right {
        flex: 1;
      }
    }

    .notReachedAccount-btn {
      font-size: 17px;
      color: #000;
      padding: 16px 0;
      text-align: center;
      background: linear-gradient(-90deg, #EDFC8A 0%, #ABE9A8 100%);
      border-radius: 30px;
      margin-bottom: 22px;
    }

    .notReachedAccount-tip {
      font-size: 12px;
      color: #F7AC15;
      text-align: center;
    }

  }
}

:deep(.van-popup--center) {
  background: #000000;
  border: 1px solid #13F6C4;
  border-radius: 10px;
}

canvas {
  height: 100px !important;
}
</style>
